<template>
    <div class="rightboxbottom">  
        <div class="bg-image">
            <div class="text-gradient">
            <h1>车辆行驶排行榜</h1>
            </div>
        </div>

        <div class="body-box">
          <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" />
        </div>

        <div class="rightBottomNname-content">今日自动驾驶公里数: {{ mileCount }}</div>  

    </div>
  </template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            noticeData:[],
            config: {
                header: ['id', 'Speed', 'A-mile', 'T-mile'],
                data: [],
                index: true,
                columnWidth: [45],
                align: ['center'],
                carousel: 'page',
                rowNum: 5, //表格行数
                headerHeight: 35, // 表头高度
                // headerBGC: '#0f1325', //表头
                // oddRowBGC: '#0f1325', //奇数行
                // evenRowBGC: '#171c33', //偶数行
                waitTime: 4000 ,// 轮播时间
                // hoverPause : true
            },
            mileCount:100,
            }
        },
    async mounted() {  
        await this.fetchdata();  
        // 开始模拟异步数据返回  
        this.startMockData();
    } ,
    methods: {  
        startMockData() {  
            // 使用 setTimeout 来模拟定期获取数据，确保每次请求之间有适当的间隔  
            this.fetchDataAndScheduleNext();  
        },  

        async fetchDataAndScheduleNext() {  
            try {  
                await this.fetchdata();  
                // 设置下一次请求的时间  
                setTimeout(this.fetchDataAndScheduleNext, 20000); // 20 秒后  
            } catch (error) {  
                console.error('Error fetching data:', error);  
            }  
        },  

        async fetchdata() {  
            try {  
                console.log("开始获取数据")
            //获取今日自动驾驶总公里数
            const responseAmile = await axios.get('/api/driveSumMile') // 发送请求到 Mock.js 拦截的 URL  
            this.mileCount = responseAmile.data.mileCount.sumMileToday ;


            //获取驾驶排名数据
            const response = await axios.get('/api/driveRank') // 发送请求到 Mock.js 拦截的 URL  
            const driveRank_data = response.data.driveRank_data ;  

            console.log("*****获取到的数据driveRank_data****",driveRank_data)

            const result_data = driveRank_data.map(v => {
                return [
                    v['vehicle_id'],
                    v['speed'],
                    v['auto_driving_mileage'],
                    v['total_mileage'],
                    ]
            })
            console.log("*****result_data****",result_data)

            // 假设 levelData 包含所需的数据
            this.updateChart(result_data); // 更新图表数据 
            } catch (error) {  
            console.error('Error fetching user:', error)  
            }  
        } ,   

        updateChart(data) {  
            console.log("*****更新前this.config****",this.config);        
            this.config.data = data;
            console.log("*****更新后this.config.data****",this.config);                   
            this.config={...this.config}
            console.log("***对象赋值之后this.config***",this.config)
        }  
    }
}
</script>

<style lang="scss" scoped>
$box-width: 378px;
$box-height: 320px;
.rightboxbottom {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

.bg-image {
background-image: url('../../assets/title.png') ;
background-size: 100% ;
background-repeat: no-repeat;
background-position: center;
width: 80%;
height: 10%; /* 根据需要设置高度 */
position: relative;
display: flex;
justify-content: center;
align-items: center;
left:10%;
top:5px;
}
.text-gradient h1 {
    font-size: 18px; /* 根据需要调整字体大小 */
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;

    letter-spacing: 0.2rem;
    text-shadow: 0 0 30px #89deed;        
}
.body-box {
    margin-top:12px;
    // border-radius: 10px;
    // overflow: visible;
    .dv-scr-board {
    width: 100%;
    height: $box-height - 105px;

    }
}
.rightBottomNname-content {
text-align: center;  
margin-top: 12px;  

font-size : 22px;
font-weight: 800;
font-family: 'Times New Roman', Times, serif;

color: transparent;
background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
-webkit-background-clip: text;
background-clip: text;
// display: inline-block;

letter-spacing: 0.2rem;
text-shadow: 0 0 30px #89deed;  

}

}

</style>